<template>
  <div class="vy-cmp-estimate-item vy-cmp-estimate-score">
    <!-- 评估内容 - 打分题 - 复用组件 -->
    <a-row>
      <a-col :span="6">
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>   
      <a-col :span="2">
        <a-button type="link" @click="click_del_estimate">删除</a-button>
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="3" class="vy-label">标题</a-col> -->
      <a-col :span="24">
        <a-input placeholder="请输入问题内容，最多输入1000字" v-model="source.title"></a-input>
      </a-col>
    </a-row>
    <a-row v-for="(option, index) in source.options" :key="index">
      <a-col :span="2" class="vy-label">选项</a-col>
      <a-col :span="22">
        <a-input :placeholder="(index+1) + '分'" v-model="option.answer">
          <a-icon slot="addonAfter" type="minus-circle" @click="click_delete_option(index)"/>
        </a-input>
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="1" class="vy-label">&nbsp;</a-col> -->
      <a-col :span="24">
        <a-button icon="plus-circle" type="link" style="padding: 0;" @click="click_add_option">添加选项</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-estimate-score",
  props: ["title", "index", "source"],
  data() {
    return {};
  },
  watch: {
    "source.options": {
      deep: true,
      handler(list) {
        // 监听并重置投票选择序列号
        list.forEach((item, index) => {
          item.id = +new Date();
          item.name = String.fromCharCode(65 + index);
        });
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.add_default_option(); // 添加默认的选项
    });
  },
  methods: {
    // 添加默认的选项
    add_default_option() {
      // 没有选项列表时，追加默认选项
      if (this.source.options && !this.source.options.length) {
        for (let idx = 0; idx < 5; idx++) {
          this.add_option_item(idx);
        }
      }
    },
    // 添加选项 - 实现方法
    add_option_item(idx) {
      this.source.options.push({
        name: "",
        answer: idx + 1
      });
    },
    // 按钮 - 添加选项
    click_add_option() {
      this.add_option_item(this.source.options.length);
    },
    // 按钮 - 删除选项
    click_delete_option(index) {
      this.source.options.splice(index, 1);
    },
    // 删除当前评估
    click_del_estimate() {
      this.$emit("del_estimate", this.index);
    }
  }
};
</script>
<style lang="scss">
.vy-cmp-estimate-score {
  padding: 10px;
  .vy-title {
    background: rgba(238, 244, 255, 1);
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    color: rgba(127, 159, 255, 1);
  }
  .vy-label {
    // text-align: right;
    // padding-right: 20px;
    text-align: left;
    padding-right: 10px;
  }
  .ant-row {
    padding: 5px 10px;
    .ant-btn-link {
      color: #444040;
    }
  }
}
</style>

